<template>
  <div class="container">
    <div class="top">
      <div v-for="(item, index) in topList" :key="index">
        <img v-show="index == 0" src="./imgs/l-4.png" alt="" />
        <img v-show="index == 1" src="./imgs/l-5.png" alt="" />
        <img v-show="index == 2" src="./imgs/l-6.png" alt="" />
        <img v-show="index == 3" src="./imgs/l-7.png" alt="" />
        <div>
          <div class="text">{{ item.field_name }}</div>
          <div class="val">
            <span>{{ item.field_value }}</span> {{ item.unit }}
          </div>
          <div class="tb" v-if="index === 3">
            全省排名<span style="margin: 0 3px;">{{ item.field_value1 }}</span
            >位
          </div>
          <div class="tb" v-else>
            {{ item.field_name1 }}
            <img style="width: 16px;height: 18px;margin-left: 3px;" src="./imgs/up.png" alt="" />
            <span style="margin-right: 3px;">{{ item.field_value1 }}</span
            >{{ item.unit1 }}
          </div>
        </div>
      </div>
    </div>
    <div class="btm">
      <div class="common-tab-box">
        <div v-for="(item, index) in tabs" :key="index" :class="{ active: active === index }" @click="active = index">
          {{ item }}
        </div>
      </div>

      <div v-if="active === 0">
        <div class="row2">
          <div v-for="(item, index) in row2List" :key="index">
            <div>{{ item.field_name }}</div>
            <div>
              <countTo
                class="val"
                :startVal="0"
                :endVal="Number(item.field_value)"
                :duration="1200"
                separator=""
              ></countTo>
              {{ item.unit }}
            </div>
          </div>
        </div>

        <div class="chart" ref="chart">
          <div class="bg">
            <div>科技创新平台</div>
            <div>
              <span>{{ total }}</span
              >个
            </div>
          </div>
          <div class="list">
            <div v-for="(item, index) in list" :key="index">
              <div :style="{ background: color[index] }"></div>
              <div>{{ item.name }}</div>
              <div>{{ item.value }}个</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="active === 1" style="height: 100%;">
        <div class="row2c2">
          <div v-for="(item, index) in row2c2List" :key="index">
            <div>{{ item.field_name }}</div>
            <div>
              <span class="val" v-if="index === 2">{{ item.field_value }}</span>
              <countTo
                v-else
                class="val"
                :startVal="0"
                :endVal="Number(item.field_value)"
                :duration="1200"
                separator=""
              ></countTo>
              {{ item.unit }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="active === 2" style="height: 100%;">
        <div class="row2c2">
          <div v-for="(item, index) in row2c3List" :key="index">
            <div>{{ item.field_name }}</div>
            <div>
              <countTo
                class="val"
                :startVal="0"
                :endVal="Number(item.field_value)"
                :duration="1200"
                separator=""
              ></countTo>
              {{ item.unit }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="active === 3" style="height: 100%;">
        <div class="row2c3">
          <div v-for="(item, index) in row2c4List" :key="index">
            <div>{{ item.field_name }}</div>
            <div>
              <countTo
                class="val"
                :startVal="0"
                :endVal="Number(item.field_value)"
                :duration="1200"
                separator=""
              ></countTo>
              {{ item.unit }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import countTo from 'vue-count-to'
import { postAction, getAction } from '@/api/manage'
export default {
  name: 'lRow1',
  components: { countTo },
  data() {
    return {
      tabs: ['科技平台', '科技企业', '科技人才', '科技成果'],
      active: 0,
      echart: null,
      topList: [],
      row2List: [
        { text: '国家技术\n创新中心', val: 48.1, unit: '万人' },
        { text: '省级重点\n实验室', val: 51.71, unit: '%' }
      ],
      row2c2List: [
        { text: '国家级科技企业孵化载体', val: 48.1, unit: '万人' },
        { text: '省级科技企业孵化载体', val: 51.71, unit: '%' },
        { text: '科技型中小企业', val: 48.1, unit: '万人' },
        { text: '高新技术企业', val: 51.71, unit: '%' }
      ],
      row2c3List: [
        { text: '高层次人才', val: 48.1, unit: '万人' },
        { text: '两院院士和海外学术机构院士', val: 51.71, unit: '%' },
        { text: '国家级领军人才', val: 48.1, unit: '万人' },
        { text: '入选“火炬计划”', val: 51.71, unit: '%' }
      ],
      row2c4List: [
        { text: '关键核心技术突破', val: 6, unit: '项' },
        { text: '全市新型研发机构承担省级及以上科技项目', val: 51.71, unit: '个' },
        { text: '市级以上重点实验室承担省重点研发计划项目', val: 48.1, unit: '万人' },
        { text: '省级重点实验室累计发表SCI论文 ', val: 51.71, unit: '%' },
        { text: '获得发明专利', val: 48.1, unit: '万人' },
        { text: '技术合同登记', val: 51.71, unit: '%' },
        { text: '技术合同成交额', val: 48.1, unit: '万人' }
      ],
      list: [],
      list2: [
        { value: 15, name: '国家级' },
        { value: 124, name: '省级' },
        { value: 541, name: '市级' }
      ],
      total: 0,
      color: ['#79D9F9', '#FF91C2', '#52F8DE', '#F4BB5E', '#60A3FB', '#f7f814', '#FD4DFF']
    }
  },
  watch: {
    async active(val) {
      console.log(val)
      if (val === 0) {
        this.initDataChart()
      }
      if (val === 1) {
        const data = await this.getData('科技企业', '文本')
        this.row2c2List = data
      }
      if (val === 2) {
        const data = await this.getData('科技人才', '文本')
        this.row2c3List = data
      }
      if (val === 3) {
        const data = await this.getData('科技成果', '文本')
        this.row2c4List = data
      }
    }
  },
  async created() {
    const res = await postAction('/topic/data/listAllData/dy_dp_cycx_kjcx_gk', {})
    this.topList = res.result.data
  },
  async mounted() {
    this.initDataChart()
    const data = await this.getData('科技平台', '文本')
    this.row2List = data
  },
  methods: {
    async getData(count_type, data_type, type) {
      const res = await getAction('/topic/data/listAllBySql/dy_dp_cycx_kjcx_kjgk', {
        count_type,
        data_type
      })
      return res.result
    },
    async initDataChart() {
      const data = await this.getData('科技平台', '饼图')
      if (data.length > 0) {
        this.list = []
        let sum = 0
        data.map((v) => {
          sum += Number(v.field_value)
        })
        this.total = sum
        data.map((v) => {
          this.list.push({
            name: v.field_name,
            value: v.field_value,
            percent: ((v.field_value / sum) * 100).toFixed(2)
          })
        })
        this.initChart(this.list)
      }
    },
    initChart(data) {
      console.log(data)
      this.echart = echarts.init(this.$refs.chart, null, {
        renderer: 'svg'
      })
      const option = {
        tooltip: {
          trigger: 'item',
          confine: true,
          textStyle: {
            fontSize: 20
          },
          extraCssText: 'width:260px',
          valueFormatter: (value) => `${value}`
        },
        grid: {
          top: '10%'
        },
        color: this.color,
        series: [
          {
            type: 'pie',
            radius: ['66%', '90%'],
            center: ['25%', '50%'],
            itemStyle: {
              borderColor: 'rgba(0, 15, 47, 0.56)',
              borderWidth: 3
            },
            label: {
              show: false
            },
            data
          }
        ]
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  .top,
  .btm {
    height: 50%;
  }
  .top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 20px 0;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #ffffff;
    & > div {
      display: flex;
      align-items: center;
      & > div {
        margin-left: -20px;
        text-align: center;
      }
    }
    .text {
      font-size: 14px;
    }
    .val {
      font-size: 12px;
      span {
        font-weight: bold;
        font-size: 20px;
        color: #ffde00;
      }
    }
    .tb {
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        font-size: 20px;
        color: #ff3e3e;
        background: radial-gradient(0deg, #ffffff 51%, #ffe5b9 54%, #ffc35b 100%);
      }
    }
    img {
      width: 104px;
      height: 94px;
    }
  }

  .btm {
    .row2 {
      display: flex;
      margin: 30px 0 10px 0;
      font-size: 16px;
      color: #fff;
      & > div {
        background: url('./imgs/l-11.png') no-repeat;
        background-size: 100% 100%;
        width: 206px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        & > div {
          margin-top: -40px;
        }
        & > div:nth-child(1) {
          width: 70px;
          text-align: center;
          margin-right: 3px;
        }
        & > div:nth-child(2) {
          span {
            font-family: Adobe Heiti Std;
            font-size: 20px;
            color: #ffde00;
            text-shadow: 4px 0px 2px #024181;
          }
        }
      }
    }
    .row2c2 {
      height: 100%;
      padding: 20px 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      place-items: center;
      font-size: 16px;
      color: #fff;
      & > div {
        background: url('./imgs/l-11.png') no-repeat;
        background-size: 100% 100%;
        width: 206px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        & > div {
          margin-top: -40px;
        }
        & > div:nth-child(1) {
          width: 80px;
          text-align: center;
          margin-right: 6px;
        }
        & > div:nth-child(2) {
          span {
            font-family: Adobe Heiti Std;
            font-size: 20px;
            color: #ffde00;
            line-height: 0px;
            text-shadow: 4px 0px 2px #024181;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
    .row2c3 {
      height: 90%;
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      color: #fff;
      overflow: auto;
      & > div {
        background: url('./imgs/l-11.png') no-repeat;
        background-size: 100% 100%;
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        & > div {
          margin-top: -40px;
        }
        & > div:nth-child(1) {
          text-align: center;
          margin-right: 20px;
        }
        & > div:nth-child(2) {
          span {
            font-family: Adobe Heiti Std;
            font-size: 20px;
            color: #ffde00;
            line-height: 0px;
            text-shadow: 4px 0px 2px #024181;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
    .chart {
      height: 150px;
      position: relative;
      &::after {
        content: '';
        border: 1px solid #4c7fc7;
        border-radius: 50%;
        width: 140px;
        height: 140px;
        position: absolute;
        top: 3.5%;
        left: 8.6%;
      }
      &::before {
        content: '';
        background: url('./imgs/l-8.png') no-repeat center center / 100% 100%;
        width: 90px;
        height: 90px;
        position: absolute;
        top: 20%;
        left: 14.5%;
        animation: rotate 10s linear infinite;
      }
      & > .bg {
        position: absolute;
        top: 35%;
        left: 15.5%;
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: #fff;
        text-align: center;
        span {
          font-family: YouSheBiaoTiHei;
          font-size: 24px;
          color: #19fdf5;
        }
      }
      & > .list {
        position: absolute;
        top: 50%;
        right: 5%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        transform: translateY(-50%);
        font-family: MicrosoftYaHei;
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
        & > div {
          display: flex;
          align-items: center;
          & > div:nth-child(1) {
            width: 4px;
            height: 16px;
            display: inline-block;
            border-radius: 2px 2px 2px 2px;
            margin-right: 10px;
          }
          & > div:nth-child(2) {
            width: 80px;
            font-size: 16px;
            font-weight: 400;
          }
          & > div:nth-child(3) {
            width: 104px;
            height: 27px;
            background: hsla(215, 61%, 29%, 0.5);
            border-radius: 6px 6px 6px 6px;
            text-align: center;
          }
        }
      }
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
  }
}
</style>
